<template>
	<view>
		<view v-for="(item, index) in dispatchList" :key="index" class="card">
			<view class="card-header">
				<text class="title" @click="gotoStation(item)">{{ item.title }}</text>
				<view class="toggle-icon" @click="toggleCard(index)">
					<uni-icons v-if="!item.isOpen" type="down"></uni-icons>
					<uni-icons v-if="item.isOpen" type="up"></uni-icons>
				</view>
			</view>
			<view v-if="item.isOpen" class="card-content">
				<view class="info">
					<uni-icons type="shop" size="22"></uni-icons>设备信息
					<view style="display: flex;justify-content: center;">
						<view style="width: 50%;">
							<text>站点设备数: {{ item.device_count }}</text>
							<text>车辆总数: {{ item.car_total }}</text>
						</view>
						<view style="width: 50%;">
							<text>车辆可用数: {{ item.car_in_station }}</text>
							<text>外借或不可用车辆: {{ item.car_rented }}</text>
						</view>
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="ring" :chartData="chartDataList[index]" :opts="ringOpts"
						v-if="chartDataList[index]" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLayout
	} from '@/api/layout.js'
	import qiunDataCharts from "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	export default {
		components: {
			qiunDataCharts
		},
		data() {
			return {
				dispatchList: [],
				chartDataList: [],
				ringOpts: {
					 color: ["#1890FF","#91CB74"],
					legend: {
						show: true
					},
					title: {
						name: '',
					},
					subtitle: {
						name: "",
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15
						}
					}
				}
			}
		},
		methods: {
			// 获取信息
			async getInfo() {
				let res = await getLayout()
				this.dispatchList = res.data.map(item => ({
					...item,
					isOpen: true
				}))
				this.chartDataList = this.dispatchList.map(item => ({
					    series: [{
					      name: '站内车辆',
					      // 计算百分比并保留2位小数
					      data: parseFloat(((item.car_in_station / item.car_total) * 100).toFixed(2))
					    }, {
					      name: '外借/不可用',
					      data: parseFloat(((item.car_rented / item.car_total) * 100).toFixed(2))
					    }]
					  
				}))
				console.log(this.chartDataList);
			},
			// 切换卡片打开或关闭状态
			toggleCard(index) {
				this.dispatchList[index].isOpen = !this.dispatchList[index].isOpen
			},
			gotoStation(item) {
				uni.navigateTo({
					url: "/home-workbench/dispatch/stationInfo?station_id=" + item.station_id,
				})
			}
		},
		onLoad() {
			this.getInfo()
		}
	}
</script>

<style scoped>
	/* 页面整体样式 */
	.card {
		background-color: #fff;
		margin: 10px 0;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.card-header {
		padding: 15px;
		background-color: #f7a500;
		/* 黄色背景 */
		border-radius: 8px 8px 0 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.toggle-icon {
		display: flex;
		align-items: center;
	}

	.icon-arrow {
		font-size: 20px;
		color: #f7a500;
		/* 美团黄色 */
	}

	.card-content {
		padding: 15px;
		background-color: #f9f9f9;
		border-radius: 0 0 8px 8px;
	}

	.circle-icon {
		display: flex;
		justify-content: center;
		margin-bottom: 15px;
	}

	.info {
		font-size: 14px;
		color: #333;
		line-height: 1.8;
	}

	.info text {
		display: block;
		margin: 5px 0;
	}
</style>